<template>
    <div class="main-body">
        <div class="top-box">
            <div>
                <el-button type="primary">保存填报</el-button>
                <el-button>导入</el-button>
            </div>
            <el-date-picker
                v-model="editMonth"
                type="month"
                placeholder="选择月">
            </el-date-picker>
        </div>
        <div class="table-box">
            <table border="1" cellspacing="0" align="center" class="my-table">
                <tr>
                    <td colspan="8" class="title">一、生态因素维护</td>
                </tr>
                <tr>
                    <td>1.1、土地利用类型</td>
                    <td>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                    <td>1.2、水体分布</td>
                    <td><el-input></el-input></td>
                </tr>
                <tr>
                    <td colspan="8" class="title">二、地理因素维护</td>
                </tr>
                <tr>
                    <td>2.1、植被类型</td>
                    <td><el-input></el-input></td>
                    <td>2.2、绿化程度</td>
                    <td><el-input></el-input></td>
                </tr>
                <tr>
                    <td colspan="8" class="title">三级指标</td>
                </tr>
                <tr>
                    <td>蚊媒数量</td>
                    <td colspan="3"><el-input></el-input></td>
                    <td>候鸟数量</td>
                    <td colspan="3"><el-input></el-input></td>
                </tr>
                <tr>
                    <td>温度</td>
                    <td colspan="7"><el-input></el-input></td>
                </tr>
                <tr>
                    <td colspan="8" class="title">常量</td>
                </tr>
                <tr>
                    <td>产卵数F</td>
                    <td><el-input></el-input></td>
                    <td>卵孵率ρEA</td>
                    <td><el-input></el-input></td>
                    <td>发育时间ρA</td>
                    <td><el-input></el-input></td>
                    <td>全球WNV病例数量</td>
                    <td><el-input></el-input></td>
                </tr>
                <tr>
                    <td colspan="8" class="title">公式</td>
                </tr>
                <tr>
                    <td>公式μ</td>
                    <td><el-input></el-input></td>
                    <td>WNV计算公式</td>
                    <td><el-input></el-input></td>
                </tr>
                <tfoot>
                    <tr>
                        <td colspan="8" rowspan="2" style="height: 80px;">WNV结果：XXXX</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</template>

<script>


export default {
	data () {
		return {
            editMonth: "",
            options: [{
                value: 'ces1',
                label: '测试数据1'
            }],
            value: ''
		}
	},
	components: {

	},
	created () {
	},
	activated () {

	},
	mounted () {

	},
	methods: {

	}
}
</script>

<style scoped>
.main-body{
    height: 100%;
    width: 100%;
}
.top-box{
    display: flex;
    justify-content: space-between;
}
.table-box{
    height: calc(100% - 40px);
    width: 100%;
}
.my-table{
    height: auto;
    width: 100%;
    margin-top: 20px;
    text-align: center;
}
tr{
    height: 40px;
}
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
.title{
    background-color: #f2f2f2;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

tr:hover {
    background-color: #ddd;
}
.el-select{
    width: 100%;
}
</style>
